<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
    html, body{
        height: 100%; width: 100%; padding: 0;
    }
    body{
        background-image: url('/Public/game/ep06/ad01.png');
        background-position: center; background-repeat: no-repeat; background-size: 100% 100%;
    }
    #main, #video, #coin {
        display: flex; flex-direction: column; align-items: center;justify-content: center; height: 100%; width: 100%;
    }
    h1{
        font-size: 2.5rem;color: white; padding: 0.5rem 1rem; font-weight: normal;
        position: absolute; color: white; z-index: 2;top: 0.5rem; right: 1.5rem;
    }
    #video-btn{
        width: 100vw; height: 100vh;z-index: 100; display: flex; align-items: center; justify-content: center;
        background-color: rgba(0, 0, 0, 0.8); position: relative;
    }
    #video-btn button{
       width: 15vmin; height: 15vmin; background: none;border:none;
    }
    #video-btn button img{
        width: 100%; height: 100%; object-fit: contain;
    }
    #video, #coin{
        display: none;
    }
    video {
        width: 100vw; height: 100vh; object-fit: contain; margin: 0 auto;position: relative;
        background-color: rgba(0, 0, 0, 1);position:absolute;left: 0; top: 0;right: 0;bottom: 0;
    }
    #coin{
       background-color: rgba(0, 0, 0, 1);
    }
    #coin img{
        width: 100vw; height: 100vh; object-fit: contain;
    }
</style>
<body>
    <div id="main">
        <div id="video">
            <h1 id="video-title"><span id="rest-time"></span></h1>
            <video id="video-content" src="" ontimeupdate="timeUpdate()" onended="videoEnd()"></video>
            <div id="video-btn">
                <button id="video-play">
                    <img src="/Public/game/ep06/icon_03.png">
                </button>
            </div>
        </div>
        <div id="coin">
            <img src="/Public/game/ep06/coin.png" alt="">
        </div>
    </div>
    <audio id="audio" src="/Public/game/ep06/reward.MP3"></audio>

</body>
<script>
    const video = document.querySelector('video');
    const audio = document.getElementById('audio');
    video.src= ''
    let status = 'index'
    let clue = ''
    console.log(window.location.href);
    function getUrlParams(url) {
        const searchParams = new URLSearchParams(url.split('?')[1]);
        const params = {};
        for (const [key, value] of searchParams.entries()) {
            params[key] = value;
        }
        return params;
    }
    let params = getUrlParams(window.location.href);
    // document.addEventListener('keypress', function(event) {
    //     console.log(event.keyCode);
    //     if (event.keyCode === 13) { // 检查按下的键是否为回车键
    //         $('#video-panel').show()
    //         $('#video').show()
    //         video.play();
    //     }
    // }, false);
    $('#video-play').click(function(){
        $('#video-btn').hide()
        video.play(); 
    })
    function videoEnd(){
        $('#rest-time').text('')
        $.ajax({
            url:'/Home/Trial/set_data',
            type:'get',
            data:{id: params.id, status:'end'},
        })
    }
    function timeUpdate(){
        let restTime = Math.round(video.duration - video.currentTime);
        console.log(restTime);
        if(video.currentTime > 0){
            $('#rest-time').text(`还剩 ${restTime} 秒`)
        }
    }
    function getData(){
        $.ajax({
            url:'/Home/Trial/get_data?id=' + params.id,
            type:'get',
            success:function(res){
                let prevStatus = status
                status = res.data.status
                console.log(status);
                if(status == 'clue'){
                    if(prevStatus != 'clue'){
                        $('#video-btn').show()
                    }
                    console.log(res.data);
                    clue = res.data.clue.title
                }
                if(status == 'coin' && prevStatus != 'coin'){
                    audio.play();
                }
                showContent(status)
                setTimeout(()=>{
                    getData()
                },1000)
            }
        })
    }
    getData()
    function showContent(status){
        if(status == 'index'){
            $('body').css('background-image', 'url(/Public/game/ep06/ad01.jpg)')
            $('#video').hide()
            $('#coin').hide()
        }
        if(status == 'load'){
            $('body').css('background-image', 'url(/Public/game/ep06/ad02.jpg)')
            $('#video').hide()
            $('#coin').hide()
        }
        if(status == 'clue'){
            $('body').css('background-image', 'url(/Public/game/ep06/ad03.jpg)')
            $('#video').show()
            $currentVideoSrc = $('video').attr('src')
            $newVideoSrc = '/Public/game/ep06/' + clue + '.mp4'
            if($currentVideoSrc != $newVideoSrc){
                console.log('diff');
                video.src = '/Public/game/ep06/' + clue + '.mp4'
            }
            $('#coin').hide()
        }
        if(status == 'coin'){
            $('body').css('background-image', 'url(/Public/game/ep06/ad03.jpg)')
            $('#video').hide()
            $('#coin').show()
            // 播放音效
        }
        if(status == 'over'){
            $('body').css('background-image', 'url(/Public/game/ep06/ad03.jpg)')
            $('#video').hide()
            $('#coin').hide()
        }
    }
</script>
</html>